<template>
  <div class="app-container">
    <div class="content-main">
      <div class="form-table-box">
        <el-form
          v-loading="loading"
          ref="infoForm"
          :rules="infoRules"
          :model="infoForm"
          label-width="120px"
        >
          <el-form-item label="老师名称" prop="teacherName">
            <el-input v-model="infoForm.teacherName" />
          </el-form-item>
          <el-form-item label="老师年龄" prop="age">
            <el-input v-model.number="infoForm.age" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model.number="infoForm.phone" />
          </el-form-item>
          <el-form-item label="所在门店" prop="storeIdList">
            <el-select
              v-model="infoForm.storeIdList"
              placeholder="请选择"
              multiple
              @change="selectStore"
            >
              <el-option
                v-for="item in storeOptions"
                :key="item.storeId"
                :label="item.storeName"
                :value="item.storeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="简介" prop="teacherDesc">
            <el-input v-model="infoForm.teacherDesc" :rows="3" type="textarea" />
          </el-form-item>
          <!-- 老师课表的内容 -->
          <el-form-item>
            <div class="courseList">
              <div v-for="(item,index) in courseList" :key="index" class="courseItem">
                <span>周几：</span>
                <el-select v-model="item.weekNo" placeholder="请选择">
                  <el-option
                    v-for="item in weekNoList"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  />
                </el-select>
                <span>时间：</span>
                <el-time-picker
                  v-model="item.courseTime"
                  value-format="HH:mm"
                  format="HH:mm"
                  placeholder="请选择"
                />
                <span>课程名称:</span>
                <el-input v-model="item.courseName" class="couseInput" />
                <span>店铺：</span>
                <el-select v-model="item.storeId" placeholder="请选择">
                  <el-option
                    v-for="item2 in storeOptions2"
                    :key="item2.storeId"
                    :label="item2.storeName"
                    :value="item2.storeId"
                  />
                </el-select>
                <el-button type="text" size="mini" class="delTxtBtn" @click="deleteCourse(index)">删除</el-button>
              </div>
              <div class="addBtn">
                <el-button type="primary" @click="addCourse">增加</el-button>
              </div>
            </div>
          </el-form-item>
          <!--end  -->
          <el-form-item>
            <el-button type="primary" @click="onSubmitInfo">提交</el-button>
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { saveTeacher, getScheduleList } from '@/api/teacher'
import { getStoreLsit } from '@/api/store/store'
export default {
  data() {
    return {
      loading: false,
      infoForm: {
        teacherId: '',
        teacherName: '',
        age: '',
        phone: '',
        storeIdList: [],
        teacherDesc: ''
      },
      storeOptions: [],
      storeOptions2: [],
      infoRules: {
        teacherName: [
          { required: true, message: '请输入老师姓名', trigger: 'blur' }
        ],
        age: [{ required: true, message: '请输入老师年龄', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入老师手机号', trigger: 'blur' }
        ],
        storeIdList: [
          { required: true, message: '请选择门店', trigger: 'change' }
        ]
      },
      weekNoList: [
        { value: '周一' },
        { value: '周二' },
        { value: '周三' },
        { value: '周四' },
        { value: '周五' },
        { value: '周六' },
        { value: '周日' }
      ],
      courseList: [
        {
          courseName: '',
          courseTime: '',
          storeId: '',
          teacherId: '',
          weekNo: ''
        }
      ],
      teacherId: '',
      query: ''
    }
  },
  created() {
    this.teacherId = this.$route.query.teacherId
    this.query = this.$route.query
    this.getList()
    // this.getTeacherDetail(this.teacherId)
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    // getTeacherDetail(teacherId) {
    //   getTeacherDetail({ id: teacherId }).then(res => {
    //     console.log(res)
    //   })
    // },
    getList() {
      getStoreLsit({
        index: 0,
        size: 100
      }).then(response => {
        this.storeOptions = response.data.data.content
        this.getTeacherDetail(this.query)
      })
    },
    onSubmitInfo() {
      this.$refs['infoForm'].validate(valid => {
        if (valid) {
          this.loading = true
          this.infoForm[`scheduleList`] = this.courseList
          saveTeacher(this.infoForm)
            .then(response => {
              this.$router.push({
                name: 'teacherlist'
              })
              // return saveSchedule(params)
            })
            .then(res => {
              this.$message({
                type: 'success',
                message: '更新成功'
              })
              this.loading = false
              this.$router.push({ name: 'teacherlist' })
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    selectStore(e) {
      this.storeOptions2 = []
      const selectId = [...e]
      this.storeOptions.forEach(item => {
        if (selectId.includes(item.storeId)) {
          this.storeOptions2.push(item)
        }
      })
    },
    deleteCourse(index) {
      this.courseList.splice(index, 1)
    },
    addCourse() {
      const temp = {
        courseName: '',
        courseTime: '',
        storeId: '',
        teacherId: '',
        weekNo: ''
      }
      this.courseList.push(temp)
    },
    getTeacherDetail(query) {
      const { storeIds, ...temp } = query
      let storeIdList = storeIds.split('|')
      storeIdList = storeIdList.filter(item => !!item).map(item => Number(item))
      this.infoForm = {
        ...temp,
        storeIdList
      }
      this.storeOptions.forEach(item => {
        if (storeIdList.includes(item.storeId)) {
          this.storeOptions2.push(item)
        }
      })
      this.getScheduleList(this.teacherId)
    },
    getScheduleList(teacherId) {
      getScheduleList({ index: 0, size: 200, teacherId }).then(res => {
        let content = res.data.data.content
        content = content.map(
          ({
            courseName,
            courseTime,
            storeId,
            teacherId,
            weekNo,
            scheduleId
          }) => ({
            courseName,
            courseTime,
            storeId,
            teacherId,
            weekNo,
            scheduleId
          })
        )
        this.courseList = content
      })
    }
  }
}
</script>

<style>
.image-uploader {
  height: 105px;
}
.image-uploader .el-upload {
  border: 1px solid #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.image-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.image-uploader .image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 187px;
  height: 105px;
  line-height: 105px;
  text-align: center;
}

.image-uploader .image-show {
  width: 187px;
  height: 105px;
  display: block;
}

.image-uploader.new-image-uploader {
  font-size: 28px;
  color: #8c939d;
  width: 165px;
  height: 105px;
  line-height: 105px;
  text-align: center;
}

.image-uploader.new-image-uploader .image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 165px;
  height: 105px;
  line-height: 105px;
  text-align: center;
}

.image-uploader.new-image-uploader .image-show {
  width: 165px;
  height: 105px;
  display: block;
}
.courseList {
  border: 1px solid #dadada;
  padding: 20px;
}
.couseInput {
  width: 100px;
}
.courseItem {
  display: flex;
  margin-bottom: 20px;
}
.courseItem span {
  padding-left: 4px;
}
.addBtn {
  display: flex;
  justify-content: center;
}
.delTxtBtn,
.delTxtBtn:hover,
.delTxtBtn:active {
  color: #f56c6c;
}
</style>
